<template>
	<view class="page-body" :style="'height:'+height+'px'">
		<scroll-view class="nav-left" scroll-y :style="'height:'+height+'px'" :scroll-top="scrollLeftTop"
		 scroll-with-animation>
			<view class="nav-left-item" @click="categoryClickMain(index)" :key="index" :class="index==categoryActive?'active':''"
			 v-for="(item,index) in classifyData">
				{{item.goodsTypeName}}
			</view>
		</scroll-view>
		<scroll-view class="nav-right" scroll-y :scroll-top="scrollTop" :style="'height:'+height+'px'"
		 scroll-with-animation>
			<view class="goodslist">
				<view class="goods" v-for="(item,index) in goods" :key="index" @tap="go_detail(index)">
					<image :src="getRealPath(item.goodsImgUrl)" mode=""></image>
					<view class="name">{{item.goodsName}}</view>
					<view class="bottom">
						<view class="price">￥{{item.goodsPrice}}</view>
						<view class="time">{{formatTime(item.createTime)}}</view>
					</view>
				</view>
			</view>

		</scroll-view>
	</view>
</template>

<script>
	import utils from "../../static/js/utils.js"

	export default {
		data() {
			return {
				goods: [],
				name: "leathersofa",
				height: 0,
				categoryActive: 0,
				scrollTop: 0,
				scrollLeftTop: 0,
				// scrollHeight: 0,
				classifyData: [],
				leftItemHeight: 51, //49行会计算出新值进行覆盖
				navLeftHeight: 0, //左边scroll-view 内层nav的总高度
				diff: 0, //左边scroll-view 内层nav的总高度与视口之差
				tabBarHeight: 0, //如果此页面为Tab页面，自己改变高度值,,一般tab高度为51
			}
		},
		onLoad: function() {
			this.height = uni.getSystemInfoSync().windowHeight - this.tabBarHeight;
			utils.loading("加载中");
			let that = this;
			let categorys = uni.getStorageSync("categorys") || [];
			if (categorys.length == 0) {
				utils.get("market/list", {}, function(data) {
					that.categorys = data;
					uni.setStorageSync("categorys", data);
					this.getGoods(1);
				});
			} else {
				this.classifyData = categorys;
				this.getGoods(1);
			}
		},
		methods: {
			go_detail(index) {
				uni.navigateTo({
					url: 'goodsdetail?good=' + JSON.stringify(this.goods[index])
				});
			},
			getRealPath(path) {
				return utils.baseImgUrl + path;
			},
			formatTime(timestamp) {
				var da = new Date(timestamp);
				return (da.getMonth() + 1) + "-" + da.getDate();
			},
			getGoods(typeId) {
				let that = this;
				utils.get("market/typeindex", {
					typeId: typeId
				}, function(data) {
					that.goods = data;
				})
			},
			categoryClickMain(index) {
				this.categoryActive = index;
				this.getGoods(index + 1);
			}
		}
	}
</script>

<style>
	.page-body {
		display: flex;
		background: #fff;
		overflow: hidden;
	}

	.nav {
		display: flex;
		width: 100%;
	}

	.nav-left {
		width: 25%;
		background: #fafafa;
	}

	.goodslist {
		padding: 0 4% 3vw 4%;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-top: 10upx;
		margin-bottom: 30upx;

	}

	.goods {
		width: 48%;
		border-radius: 20rpx;
		background-color: #fff;
		margin: 0 0 15rpx 0;
		box-shadow: 0rpx 5rpx 25rpx rgba(0, 0, 0, 0.1);
		margin-top: 14upx;
	}

	.goods image {
		width: 100%;
		border-radius: 20rpx 20rpx 0 0;
		height: 120px;

	}

	.name {
		width: 92%;
		padding: 10rpx 4%;
		text-align: justify;
		font-size: 30rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.bottom {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		width: 92%;
		padding: 10rpx 4% 10rpx 4%;


	}

	.price {
		color: #e65339;
		font-size: 30rpx;
		font-weight: 600;


	}

	.time {
		color: #807c87;
		font-size: 24rpx;


	}

	.nav-left-item {
		height: 100upx;
		border-right: solid 1px #f1f1f1;
		border-bottom: solid 1px #f1f1f1;
		font-size: 30upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.nav-left-item:last-child {
		border-bottom: none;
	}

	.nav-right {
		width: 75%;
	}

	.box {
		display: block;
		overflow: hidden;
		border-bottom: 20upx solid #f3f3f3;
	}

	.box:last-child {
		border: none;
	}

	.nav-right-item {
		width: 28%;
		height: 220upx;
		float: left;
		text-align: center;
		padding: 11upx;
		font-size: 28upx;
		background: #fff;
	}

	.nav-right-item image {
		width: 150upx;
		height: 150upx;
	}

	.active {
		color: #FF80AB;
		background: #fff;
		border-right: 0;
	}

	::-webkit-scrollbar {
		/*取消小程序的默认导航条样式*/
		width: 0;
		height: 0;
		color: transparent;
	}
</style>
